<template>
<div class="nav-bar">
    <ul class="nav-list">
        <li>
            <router-link to="home" class="nav-list-item">
                <i class="iconfont icon-shouye"></i>
                <span>首页</span>
            </router-link>
        </li>
        <li>
            <router-link to="category" class="nav-list-item">
                <i class="iconfont icon-fenlei"></i>
                <span>分类</span>
            </router-link>
        </li>
        <li>
            <router-link to="cart" class="nav-list-item">
                <i class="iconfont icon-shouye1"></i>
                <span>购物车</span>
            </router-link>
        </li>
        <li>
            <router-link to="user" class="nav-list-item">
                <i class="iconfont icon-wode"></i>
                <span>我的</span>
            </router-link>
        </li>
    </ul>
</div>


</template>

<script>


export default {

};

</script>

<style lang="less" scoped>
@import '../common/style/mixin.less';
.nav-bar{
   position:fixed;
    left:0;
    bottom:0;
    width: 100%;
    padding: 5px 0;
    z-index: 1000;
    background: #fff;
    transform: translateZ(0);
    .nav-list{
        width:100%;
        .fj(space-around);
        flex-direction: row;
        padding: 0;
        li  .nav-list-item.router-link-active{
                color:@primary;
            }
        li .nav-list-item {
            display: flex;
            flex: 1;
            flex-direction:column;
            text-align:center;
            color:#666;
            i {
                text-align: center;
                font-size: 22px;
            }
            span {
                font-size: 12px;
            }
        }
    }
}
</style>
